import { DatePicker } from "../DatePicker/DatePicker"
import { format } from "date-fns"
import { ru } from "date-fns/locale"
import { Button } from "../ui/button"
import { useAppDispatch } from "@/hook/useRedux"
import { changeSubtaskDate } from "@/redux/tasks/tasksSlice"
import { ReactNode } from "react"

interface Props {
  children?: ReactNode,
  subtaskId: number,
  taskId: number,
  columnId: number,
  endDate: Date | string | null
}

export const SubtaskCardDate = ({ children, subtaskId, taskId, columnId, endDate }: Props) => {
  const dispatch = useAppDispatch()

  const changeEndDate = (date: any) => {
    dispatch(changeSubtaskDate({ columnId, taskId, date: date.end_date, subtaskId }))
  }

  return (<DatePicker setTaskDate={changeEndDate} end_date={endDate} clear={changeEndDate} >
    {endDate ? (
      <Button className='p-0 hover:bg-transparent hover:text-slate-300 group' variant={'ghost'} onClick={(e) => e.stopPropagation()} >
        <span className='text-xs font-medium text-[#F3654A]'>{format(new Date(endDate || ''), 'dd MMMM', { locale: ru })}</span>
      </Button>
    ) : children ? (<div onClick={(e) => {
      e.stopPropagation()
      // changeEndDate()
    }} >{children}</div>) : <Button className='p-0 hover:bg-transparent hover:text-slate-300 group invisible' variant={'ghost'} onClick={(e) => e.stopPropagation()} >Выбрать</Button>}
  </DatePicker>
  )
}